<template>
  <Card>
    <List item-layout="vertical">
      <ListItem v-for="item in data" :key="item.title">
        <ListItemMeta
          :avatar="item.avatar"
          :title="item.title"
          :description="item.description"
        />
        <div class="ivu-mb-8">贡献人员:</div>
        <AvatarList :list="item.content" />

        <template #extra>
          <div
            style="display: flex; justify-content: space-between"
            class="ivu-text-center"
            @click="openComicModal(item)"
          >
            <Image
              :src="item.masterImage"
              class="ivu-mr-8 ivu-b"
              height="150px"
              lazy
            />
            <Image
              class="ivu-mr-8 ivu-b"
              :src="item.orderImage"
              height="150px"
              lazy
            />
            <Image class="ivu-b" :src="item.extraImage" height="150px" lazy />
          </div>
        </template>
      </ListItem>
    </List>
    <ImagePreview v-model="preview" :preview-list="urlList" />
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="allComicNum"
        show-total
        show-elevator
        @on-change="pageChange"
        @on-prev="pageChange"
        @on-next="pageChange"
      />
    </div>
  </Card>

  <Drawer title="查看图片" width="90%" :closable="true" v-model="comicDrawer">
    <div style="display: flex; justify-content: space-between">
      <div>
        <Image lazy :src="comicModalData.masterImage" />
        <div class="ivu-text-center">原图</div>
      </div>
      <div>
        <Image lazy :src="comicModalData.orderImage" />
        <div class="ivu-text-center">序图</div>
      </div>
      <div>
        <Image lazy :src="comicModalData.extraImage" />
        <div class="ivu-text-center">译图</div>
      </div>
    </div>
  </Drawer>
</template>

<script>
import { get } from "@/utils/http";
export default {
  name: "ComicView",
  data() {
    return {
      data: [{}],
      comicModal: false,
      comicDrawer: false,
      preview: false,
      urlList: [],
      comicModalData: "",
      currentPage: 1,
      allComicNum: 0,
    };
  },
  mounted() {
    this.getComic();
  },
  methods: {
    openComicModal(row) {
      // this.comicDrawer = true;
      this.comicModalData = row;
      console.log(row, "2");
      this.preview = true;
      this.urlList = [row.extraImage, row.masterImage, row.orderImage];
    },
    async getComic() {
      const res = await get(`getComicList.php?page=${this.currentPage}`);
      if (res) {
        this.data = res;
      }
    },
    pageChange(page) {
      this.currentPage = page;
      this.getComic();
    },
  },
};
</script>

<style>
</style>
